<div page-header="Manage users" class="row spacing-bottom-md">
    <div class="col-sm-1">
        <button class="btn btn-info" ng-click="getCustomer()">Customer</button>
    </div>
    <div class="col-sm-3">
        <select class="form-control" ng-options="role as role.name for role in roles track by role.id" ng-model="selectedRole" ng-change="changeRole(selectedRole)"></select>
    </div>
    <div class="col-sm-3">
        <button class="btn btn-info" ng-click="openNewUserDialog()" has-access="UserCreate">New user</button>
    </div>
</div>

<table ng-table="tableParams" class="table table-user table-hover table-bordered ng-table-resizable-columns" ng-visible="$data.length">

    <tr ng-repeat="item in $data">
        <td data-title="''">
            <img ng-src="/Content/images/{{item.online ? 'online' : 'offline'}}.png" />
        </td>
        <td data-title="'Full Name'">
            <a href="#" e-required editable-text="item.fullName" onaftersave="updateUser(item)">{{item.fullName}}</a>
        </td>
        <td data-title="'User Name'">
            <a href="#" e-required editable-text="item.userName" onaftersave="updateUser(item)" ng-disabled="item.id == currentUserId">{{item.userName}}</a>
        </td>
        <td data-title="'Position'">
            <a href="#" editable-select="item.role" e-ng-options="s as s.name for s in roles" onaftersave="updateUser(item)" ng-disabled="item.id == currentUserId">{{item.role.name}}</a>
        </td>
        <td data-title="'Mobile'">
            <a href="#" editable-text="item.mobile" onaftersave="updateUser(item)">{{item.mobile}}</a>
        </td>
        <td data-title="'Phone'">
            <a href="#" editable-text="item.tel" onaftersave="updateUser(item)">{{item.tel}}</a>
        </td>
        <td data-title="'Email'">
            <a href="mailto://{{item.email}}" editable-email="item.email" onaftersave="updateUser(item)">{{item.email}}</a>
        </td>
        <td data-title="'Current Login Ip'" class="text-center">
            <span>{{item.ip}}</span>
        </td>
        <td class="text-center" data-title="'Status'" style="width: 9%;" header-class="status-col">
            <div class="btn-group" dropdown>
                <button type="button" ng-disabled="item.id == currentUserId" class="btn {{item.activate ? 'btn-info' : 'btn-danger'}} dropdown-toggle">
                    {{ item.activate ? 'Active' : 'Inactive' }} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="open(item)" has-access="UserEdit">Change Pass</a></li>
                    <li><a busy-click="item.activate = !item.activate; updateUser(item)" has-access="UserEdit">{{ item.activate ? 'Deactivate' : 'Activate' }}</a></li>
                </ul>
            </div>
        </td>
    </tr>
</table>

<script type="text/ng-template" id="changePass.html">
    <div class="modal-body">
        <div class="row">
            <div class="col-sm-12 spacing-bottom-sm">
                <input class="form-control" type="password" ng-model="newPassword" placeholder="New Password" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <input class="form-control" type="password" ng-model="confirmPassword" placeholder="Confirm Password" />
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok(newPassword)" ng-disabled="!newPassword || !confirmPassword || newPassword != confirmPassword">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

<div ng-show="!tableParams.settings().$loading && tableParams.data.length === 0" class="well text-center">No result</div>